<template>
<div>
    <el-header>
        <div>
            <div class="titleArea">
                <el-image style="width: 50px; height: 50px; margin: 5px" :src="require('@/assets/img/mlogo.png')" fit="fit"></el-image>
                <span class="title">智慧工厂<i>管理后台</i></span>
                <div class="iconBlock">
                    <div class="user_name">{{username}}</div>
                    <el-dropdown @command="handleCommand">
                        <el-avatar :size="50" :src="require('@/assets/img/avatar-3.png')"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command='info'>用户信息</el-dropdown-item>
                            <el-dropdown-item command='setting'>系统设置</el-dropdown-item>
                            <el-dropdown-item command='logout'>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </el-header>

    <el-container>

        <el-menu router class="el-menu-vertical-demo" background-color="#ffffff" text-color="#333333" active-text-color="#10c4ee" :collapse='false' :default-active="activePath" :unique-opened='true' @open='handleOpen'>
            <el-menu-item index="/home">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu v-for="item in menusList" :key="item.id" :index='item.name'>
                <template slot="title">
                    <i class="el-icon-menu"></i>

                    <span>{{ item.name }}</span>
                </template>

                <el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="subItem.url">
                    <template slot="title">
                        <span>{{ subItem.name }}</span>
                    </template>
                </el-menu-item>
            </el-submenu>
        </el-menu>

        <div style="width:100%;height:100%;margin:10px;">
            <App></App>
        </div>

    </el-container>
       
</div>
</template>

<script>
import {
    getMenusList
} from "@/api/menus";
import {
    getUserInfo
} from "@/api/user";
import {
    store
} from "../store/index";
import App from '../App.vue';

import {
    getStaffList,
    getDepartList
} from '@/api/getData';

export default {
    data() {
        return {
            menusList: [],
            roleId: 1,
            username: '',
            activePath: '2',
            routerData: []
        };
    },
    components: {
        App
    },
    computed: {
        // defaultActive: function () {
        //   return this.$route.path.replace("/", "");
        // },
    },
    created() {
        //  if(this.$store.getters.user.token) {
        this.getMenusData();
        this.getUserData();
        this.getRouteData();
        //  }else{
        //    	 this.$router.push({path: '/login'})

        //  }

    },
    mounted() {
        // this.getStaffLists();
        // this.getDepartList();

    },
    methods: {
        handleOpen(index) {
            console.log(index);
        },
        async getStaffLists() {
            getStaffList()
                .then()
                .then((res) => {
                    let userList = res.data.list;
                    store.commit('setStaffList', userList);
                    console.log(userList);
                })
                .catch((err) => {
                    store.commit("LOGOUT");
                    this.$router.push({
                        path: '/login'
                    })

                });
        },
        async getDepartList() {
            try {
                var params = {
                    page: 1,
                    pageSize: 999,
                };
                const result = await getDepartList(params);
                if (result.code == 200) {
                    let depart = result.data.list;
                    store.commit('setDepartList', depart);
                    console.log(depart);
                }
            } catch (error) {
                this.$message({
                    type: "error",
                    message: error.message,
                });
            }
        },
        async getMenusData() {
            try {
                const lists = await getMenusList({
                    roleId: this.roleId
                });
                if (lists.code == 200) {
                    this.menusList = lists.data;
                    console.log(lists.data);
                } else {
                    throw new Error("获取数据失败");
                }
                // this.getFoods();
            } catch (err) {
                console.log("获取数据失败", err);
            }
        },
        async getUserData() {
            //获取用户信息 保存用户信息
            getUserInfo()
                .then((res) => {
                    // 根据token拉取用户信息
                    let userList = res.data;
                    this.username = userList.nickname ? userList.nickname : userList.username;
                    store.commit('setUser', userList);
                })
                .catch((err) => {
                    store.commit("LOGOUT");
                    this.$router.push({
                        path: '/login'
                    })

                });
        },
        handleCommand(command) {
            console.log(command);
            if (command == 'logout') {
                this.clickLogout();
            }
        },
        clickUserInfo() {
            this.$route.push('/info');
        },
        clickSettingInfo() {
            this.$route.push('/setting');

        },
        clickLogout() {
            store.commit('LOGOUT');
            this.$router.push({
                path: '/login'
            })
        },
        getRouteData() {

            this.routerData = []
            // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})

            this.name = this.$route.name
            this.$route.matched.forEach((item) => {
                // item.name !== 'index' && this.breadList.push(item)
                this.routerData.push(item)
            })
        }

    },
    watch: {
        // $route() {
        //     this.getRouteData()
        // }
    }
};
</script>

<style lang="less" scoped>
@import "../style/mixin";

// .el-menu {
//   border-right-width: 0;
// }
.el-header {
    background-color: aliceblue;
}

.titleArea {
    justify-content: flex-start;
    align-items: center;
    display: flex;
    margin-right: auto;

    .title {
        margin-left: 20px;
        font-size: 26px;

        i {
            color: #1979e7;
        }
    }
}

.user_name {
    font-size: 20px;
    margin-right: 10px;
}

.iconBlock {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
}

.el-menu {
    width: 140px;

    .el-submenu .el-menu-item {
        min-width: 0;
    }
}

.el-main {
    background-color: #f5f5f5;
}
</style>
